<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>flex5</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="./index.css" rel="stylesheet">
<style>
  body,html{
    height: 100%;
    background-color: #f3f3f3;
  }
  .flex5-header{
    width: 100%;
    height: 50px;
    background-color: #ffffff;
  }

  .flex5-main{
    display: flex;
    width: 1000px;
    margin:10px auto 0;
    justify-content:space-between;
  }

  .flex5-main-left{
    width:694px;
    height: 2000px;
    background: red;
  }

  .flex5-main-right{
    width: 296px;
    background: blue;
  }

</style>
</head>
<body>
  <div class="flex5">
    <header class="flex5-header"></header>
    <div class="flex5-main">
      <div class="flex5-main-left">1</div>
      <div class="flex5-main-right">2</div>
    </div>
  </div>
</body>
</html>